在实战篇中，我们对请求策略及缓存置换策略进行了讨论，通过这两个机制我们能够高效地利用本地缓存来提高应用性能及可用性。本章我们将学习这两个机制在 Workbox 中的使用。

# 请求策略

在实战篇：请求策略中，我们讨论了五种常见的请求策略，分别为：

• 缓存优先：首先从缓存中进行匹配，如果存在相关请求的响应，返回该响应，否则通过网络获取。
• 网络优先：首先通过网络获取，如果请求异常，则从缓存中获取。
• 仅使用缓存：所有请求都从缓存中获取。
• 仅使用网络：所有请求都从网络中获取。
• 先缓存后网络：缓存优先的升级版，它与后者的唯一区别是，如果在缓存中匹配到相关请求的响应，在返回该响应的同时依旧会发起网络请求，并更新相关缓存。

Workbox 中的 workbox-strategies 模块为我们实现了上述常见策略，相关类分别为：

• 缓存优先：workbox.strategies.CacheFirst。
• 网络优先：workbox.strategies.NetworkFirst。
• 仅使用缓存：workbox.strategies.CacheOnly。
• 仅使用网络：workbox.strategies.NetworkOnly。
• 先缓存后网络：workbox.strategies.StaleWhileRevalidate。

这些类的构造函数皆接收含有以下属性的对象：

• cacheName：缓存名称，默认值为 Workbox 配置中的运行时缓存名。
• plugins: 插件数组列表，在获取或缓存请求时会调用它们的生命周期方法以便执行一些额外操作（比如清空过期缓存）。
• fetchOptions：网络请求配置信息，结构与函数 fetch 中的 init 参数一致（在 CacheOnly 中，该属性将会被忽略）。
• matchOptions：CacheQueryOptions 对象（在 NetworkOnly 中，该属性将会被忽略）。
• networkTimeoutSeconds：如果对该属性进行了赋值，那么网络会在指定的时间内没有响应时使用本地缓存来进行响应（该属性仅在 NetworkFirst 中有效）

上文对 Workbox 中常见策略的实现进行了简单介绍，接下来我们来看一下它具体的使用，比如：

workbox.routing.registerRoute(
  '/api/users',
  new workbox.strategies.NetworkFirst({...})
);

上例中，我们使用了上一章介绍的 workbox.routing.registerRoute 方法来拦截请求 /api/users，并通过 workbox.strategies.NetworkFirst 的实例进行响应，结合上一章的学习，我们可以确定上述五个类中必定包含实例方法 handle，故可据此实现自己的请求策略，比如：

class CustomStrategy {
  async handle({ url, event, request, params }) {
    new Response(...);
  }
}

workbox.routing.registerRoute(
  '/api/users',
  new CustomStrategy()
);

除了将请求策略类的实例作为 workbox.routing.registerRoute 方法的 handler 参数外，我们也可以在自定义的 fetch 事件中直接使用，比如：

self.addEventListener('fetch', (event) => {
  const { pathname } = new URL(event.request.url, location);
  if (pathname === '/api/users') {
    const networkFirst = new workbox.strategies.NetworkFirst();
    even